<template>
  <div>
    <div id="map" class="mapC"></div>
    <div class="eventC">
      <div class="block">
        <el-slider v-model="value1" @input="sliderChange"></el-slider>
      </div>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Map from 'ol/Map'
import TileLayer from 'ol/layer/Tile'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
import {getRenderPixel} from 'ol/render'
export default {
  name: 'index',
  data () {
    return {
      value1: 0,
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    sliderChange (val) {
      this.map.render()
    },
    initMap () {
      const aerial = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png',
          maxZoom: 20
        })
      })
      const aerialz = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png',
          maxZoom: 20
        })
      })
      const osaerialm = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/img/{z}/{x}/{y}.png',
          maxZoom: 20
        })
      })

      this.map = new Map({
        layers: [aerial, aerialz, osaerialm],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      })

      osaerialm.on('prerender', (event) => {
        const ctx = event.context
        const mapSize = this.map.getSize()
        const width = mapSize[0] * (this.value1 / 100)
        const tl = getRenderPixel(event, [width, 0])
        const tr = getRenderPixel(event, [mapSize[0], 0])
        const bl = getRenderPixel(event, [width, mapSize[1]])
        const br = getRenderPixel(event, mapSize)

        ctx.save()
        ctx.beginPath()
        ctx.moveTo(tl[0], tl[1])
        ctx.lineTo(bl[0], bl[1])
        ctx.lineTo(br[0], br[1])
        ctx.lineTo(tr[0], tr[1])
        ctx.closePath()
        ctx.clip()
      })

      osaerialm.on('postrender', function (event) {
        const ctx = event.context
        ctx.restore()
      })
    }
  }
}
</script>

<style scoped>

</style>
